/**
 * Filename: index.js
 * Author: xhh
 * Decription: 首页的js文件，主要是实现一些效果，例如轮播、下拉菜单....
 * Date: 2018.03.19
 */
// 入口函数
$(function () {
    /**************************轮播 start**************************/
    /**
     * 判断显示屏大小，决定用背景图还是img标签
     */
    function resize() {
        // 获取屏幕的宽度
        var windowWidth = $(window).width();
        // 根据大小为界面上的每一个div设置背景图，小于520px则为小屏幕
        var isSmallScreen = windowWidth < 520;
        // 获取div元素组，获取到的是一个数组，有多个元素
        $("#site_main_ad > .site-carousel-inner > .item").each(function (i, item) {
            // 将DOM对象转换成JQuery对象  item是变量不需要加上“”
            var $item = $(item);
            // 判断屏幕是大屏还是小屏
            var imgSrc = $item.data(isSmallScreen ? "image-xs" : "image-lg");
            // 设置背景图片
            $item.css("backgroundImage", "url('" + imgSrc + "')");
            // 当是小屏小图的时候我们就用img标签，能够自动缩放，当是大图的时候就使用背景
            if (isSmallScreen) {
                // 清空背景图
                $item.css("backgroundImage", "url('')");
                // 插入img标签
                $item.html("<img src='" + imgSrc + "'/>");
            } else {
                $item.empty();
            }
        });
    }

    // 轮播图
    var $index = 0;
    // 获取存放轮播图的div元素组
    var divs = $(".site-carousel-inner>.item");
    divs.first().addClass("active");
    // 获取div的个数
    var length = divs.length;
    // 定时器timer
    var timer = null;
    timer = setInterval(autoplay, 3000);
    /**
     * 自动播放函数
     */ 
    function autoplay() {
        $(".carousel-control-next").click();
    }
    /**
     * 添加图片动画
     */ 
    function imgAnimation() {
        $(".site-carousel-inner > .item").eq($index).stop().fadeIn(200).siblings().stop().fadeOut(0);
    }
    /**
     * 点击上一张下一张时，小圆点的样式改变
     */
    function circleAnimation() {
        $("#site_main_ad > .site-carousel-indicators > li").eq($index).addClass("active").siblings().removeClass("active");
    }
    // 四个小圆点鼠标移入事件
    $("#site_main_ad > .site-carousel-indicators > li").on("mouseover",function () {
        // 清除定时器
        clearInterval(timer);
        // 将当前的slide-to值给index
        $index = $(this).data("slide-to");
        // 让被选中的点改变颜色其他变为默认颜色
        $(this).addClass("active").siblings().removeClass("active");
        imgAnimation();
    }).on("mouseout",function () { // 鼠标移出事件
        // 清除定时器
        clearInterval(timer);
        // 重新开启定时器
        timer = setInterval(autoplay, 3000);
    });


    // 上一张下一张按钮点击事件
    $(".carousel-control").on("click",function (event) {
        // 获取自定义数据
        var dataset = event.currentTarget.dataset.slide;
        if (dataset === 'next') {
            // 显示下一张
            $index++;
            // 如果超出界限则从第一张开始
            if ($index >= length) {
                $index = 0;
            }
        } else {
            // 显示上一张
            $index--;
            // 如果已经是第一张则显示最后一张
            if ($index < 0) {
                $index = length - 1;
            }
        }
        circleAnimation();
        imgAnimation();
    });

    // 鼠标移入轮播图事件
    $("#site_main_ad ").on("mouseenter",function (event) {
        // 阻止浏览器默认事件
        event.preventDefault();
        // 清除定时器
        clearInterval(timer);
        // 显示控制按钮
        $(".carousel-control").fadeIn(500);
    }).on("mouseleave",function (event) {
        // 阻止浏览器默认事件
        event.preventDefault();
        // 清除定时器
        clearInterval(timer);
        // 开启定时器
        timer = setInterval(autoplay, 3000);
        // 隐藏控制按钮
        $(".carousel-control").fadeOut(500);
    });

    var OFFSET = 50;
    // 轮播图触摸
    $('#site_main_ad').each(function (i, item) {
        var startX, endX;
        item.addEventListener('touchstart', function (e) {
            // 清除定时器
            clearInterval(timer);
            // 得到触屏时的坐标
            startX = e.touches[0].clientX;
            e.preventDefault();
        });
        item.addEventListener('touchmove', function (e) {
            // 清除定时器
            clearInterval(timer);
            endX = e.touches[0].clientX;
            e.preventDefault();
        });
        item.addEventListener('touchend', function (e) {
            // 清除定时器
            clearInterval(timer);
            var offsetX = endX - startX;
            // 判断是左滑还是右滑
            if (offsetX > OFFSET) {
                // 显示上一张
                $index--;
                // 如果已经是第一张则显示最后一张
                if ($index < 0) {
                    $index = length - 1;
                }
                circleAnimation();
                imgAnimation();
            } else if (offsetX < -OFFSET) {
                // 显示下一张
                $index++;
                // 如果超出界限则从第一张开始
                if ($index >= length) {
                    $index = 0;
                }
                circleAnimation();
                imgAnimation();
            }
            // 开启定时器
            timer = setInterval(autoplay, 3000);
            e.preventDefault();
        });
    });
    // 窗口缩放是触发resize函数
    $(window).on("resize", resize).trigger("resize");
    /**************************轮播 end**************************/


    // // 滑动滚动条
    // $(window).scroll(function () {
    // // 滚动条距离顶部的距离 大于 700px时,背景色变黑色
    // if ($(window).scrollTop() >= 700) {
    //     $("#site_header").fadeIn(1000).css("background-color","rgba(0, 0, 0, 1)");
    // } else {
    //     $("#site_header").fadeIn(1000).css("background-color", "rgba(0, 0, 0, .75)");
    // }
    // }); 


    /**************************钻石展示(裸钻/彩钻) start**************************/
    // 裸钻和彩钻部分左右滑动效果
    var comNow = 0;     // 裸钻的当前下标
    var colNow = 0;     // 彩钻的当前下标
    var $comObj = $("#common_diamonds_list");
    var $colObj = $("#color_diamonds_list");
    // 裸钻部分的点击事件(下一张按钮点击事件)
    $("#com_next_btn").on("click", function () {
        showNextGoods($comObj,comNow);
    });
    // 裸钻部分的点击事件(上一张按钮点击事件)
    $("#com_pre_btn").on("click", function () {
        showPreGoods($comObj, comNow);
    });

    // 彩钻部分的点击事件(下一张按钮点击事件)
    $("#col_next_btn").on("click", function () {
        showNextGoods($colObj, colNow);
    });
    // 彩钻部分的点击事件(上一张按钮点击事件)
    $("#col_pre_btn").on("click", function () {
        showPreGoods($colObj, colNow)
    });
    /**
     * 显示下一个商品
     * @param {*需要动画的对象} $obj 
     * @param {*索引值} index 
     */
    function showNextGoods($obj,index) {
        var len = $obj.children('li').length;
        // 停止当前动画
        $obj.stop(true,false);
        // 判断是不是还剩四个,如果是则到最后了
        if ((len-4) === index) {
            return;
        } else {
            // 如果不是则继续下一张
            $obj.animate({
                left: -(index + 1) * 25 + '%'
            }, '500', function () {
                // 动画完成后++,避免用户多次点击卡顿
                if ($obj.selector === '#common_diamonds_list') {
                    comNow++;
                } else {
                    colNow++;
                }
                
            });
        }
    }
    /**
     * 
     * @param {*jQuery对象}  $obj
     * @param {*索引值} index 
     */
    function showPreGoods($obj,index) {
        // 停止当前动画
        $obj.stop(true,false);
        // 如果是第一张点击则什么都不操作
        if (index === 0) {
            return;
        } else {
            $obj.animate({
                left: -(index-1)*25 + "%"
            },500,function () {
                // 动画完成后++,避免用户多次点击卡顿
                if ($obj.selector === '#common_diamonds_list') {
                    comNow--;
                } else {
                    colNow--;
                }
            });
        }
        
    }
    /**************************钻石展示(裸钻/彩钻) end**************************/
})